<template>
  <div class="page-wrapper">
    <b-container fluid>
      <b-row align-h="center">
        <b-col lg="11" class="content-nav">
          <div class="d-none d-sm-block page-breadcrumb">
            <a-breadcrumb separator=">">
              <a-breadcrumb-item href="/">首页</a-breadcrumb-item>
              <a-breadcrumb-item href="/product">我们的产品</a-breadcrumb-item>
              <a-breadcrumb-item>{{ breadcrumbTitle }}</a-breadcrumb-item>
            </a-breadcrumb>
          </div>
        </b-col>
        <b-col lg="11" class="prodocut-detail-wrapper">
          <div class="product-detail-header">
            <div class="product-image-carousel-container">
              <a-carousel arrows autoplay dots-class="slick-dots slick-thumb">
                <a slot="customPaging" slot-scope="props">
                  <img :src="getImgUrl(props)" />
                </a>
                <div v-for="(image, index) in images" :key="index">
                  <b-img :src="image" />
                </div>
              </a-carousel>
            </div>
            <div class="product-detail-header-container">
              <p class="product-title">{{ title }}</p>
              <p class="product-slug">{{ slug }}</p>
            </div>
          </div>
          <div class="product-detail-body" v-html="content"></div>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>

<script>
import siteConfig from '@/assets/config/site';

const PRODUCT_DETAIL_API = `${siteConfig.apiPrefix}${siteConfig.apis.productDetail}`;

export default {
  productDetailAPI: PRODUCT_DETAIL_API,
  layout: 'staticBanner',
  data() {
    return {
      productId: null,
      product: null,
      imgDomain: '',
    };
  },
  computed: {
    breadcrumbTitle() {
      if (this.product) {
        return this.product.title;
      }
      return '产品详情';
    },
    title() {
      return this.product ? this.product.title : '';
    },
    slug() {
      return this.product ? this.product.slug : '';
    },
    content() {
      return this.product ? this.product.content : '';
    },
    images() {
      let images = [];
      if (this.product) {
        images = [...this.product.image_list];
        if (!images.includes(this.product.cover_image)) {
          images = [this.product.cover_image, ...images];
        }
      }
      // images = images.map(img => `${this.imgDomain}${img}`);
      return images;
    },
  },
  async asyncData({ route, $axios }) {
    const { params } = route;
    const { id: productId } = params;
    let product = null;
    let imgDomain = '';
    try {
      const data = (await $axios.$get(PRODUCT_DETAIL_API, {
        params: { productId },
      })).data;
      product = data.entry;
      imgDomain = data.domain;
    } catch (err) {
      return {
        productId: null,
        product: null,
        imgDomain,
      };
    }
    return {
      productId,
      product,
      imgDomain,
    };
  },
  async mounted() {
    if (!this.productId) {
      this.productId = this.$route.params.id;
      await this.loadDetail();
    }
    console.log('>>>>product', this.product);
  },
  methods: {
    async loadDetail() {
      try {
        const data = (await this.$axios.$get(this.$options.productDetailAPI, {
          params: { productId: this.productId },
        })).data;
        this.product = data.entry;
        this.imgDomain = data.domain;
      } catch (err) {
        this.$message.error('网络错误，请稍后再试');
      }
    },
    getImgUrl(props) {
      return this.images[props.i];
    },
  },
};
</script>

<style lang="scss" scoped>
.page-wrapper {
  height: 100%;
  width: 100%;
  background: #f3f3f3;
  display: flex;
  flex-direction: column;
  align-items: center;
  @include media-breakpoint-up(sm) {
    padding-top: $main-nav-bar-height;
  }
}
.content-nav {
  margin: 24px 12px;
  @include media-breakpoint-down(xs) {
    margin-bottom: 0px;
  }
}
.product-detail-header {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.product-image-carousel-container {
  flex: 0 0 40%;
  width: 1px;
}
.product-detail-header-container {
  margin-left: 24px;
  .product-title {
    font-family: PingFangSC-Semibold;
    font-size: 24px;
    color: #000000;
    line-height: 32px;
  }
  .product-slug {
    font-size: 18px;
    line-height: 24px;
  }
}
.product-detail-body {
  margin-top: 72px;
}
.ant-carousel {
  ::v-deep .slick-dots {
    height: auto;
  }
  ::v-deep .slick-slide img {
    border: 5px solid #fff;
    display: block;
    margin: auto;
    max-width: 80%;
  }
  ::v-deep .slick-thumb {
    bottom: -45px;
    li {
      width: 60px;
      height: 45px;
      img {
        width: 100%;
        height: 100%;
        filter: grayscale(100%);
      }
      &.slick-active img {
        filter: grayscale(0%);
      }
    }
  }
}
</style>
